<template>
	<div id="app">
		<router-link to="/user/1">用户1</router-link>
		<router-link to="/user/2">用户2</router-link>
		<button @click="goToDashboard">点击跳转到 Dashboard</button>
		<button @click="goBack">返回上一页</button>
		<router-view />
	</div>
</template>
<script>
export default {
	methods: {
		goBack: function () {
			this.$router.go(-1)
			// this.$router.go(-100) // 记录不够的话，默默失败了
		},
		goToDashboard: function () {
			// console.log(this.$router)
			// this.$router 路由对象，主要提供可以实现路由变化的方法
			// this.$route 路由对象，主要是提供了路由参数
			// this.$router.push('dashboard')
			this.$router.push({
				path: '/dashboard',
			})
			// this.$router.push({
			// 	name: 'Dashboard',
			// 	params: {
			// 		userId: 123,
			// 	},
			// })
			// /dashboard?plan=private
			// this.$router.push({
			// 	path: '/dashboard',
			// 	query: { plan: 'private' },
			// })
			// replace 不会往里面添加历史
			// this.$router.replace('dashboard')
			// this.$router.push('dashboard')
		},
	},
}
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}

#nav {
	padding: 30px;
}

#nav a {
	font-weight: bold;
	color: #2c3e50;
}

#nav a.router-link-exact-active {
	color: #42b983;
}
button{
	margin-left: 10px;
}
 a{
	margin-left: 20px;
}
</style>
